@import url(./base.less);
@import url(./normalize.less);
@rootSize: 37.5rem;
.hidden {
  overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
.all {
 margin-bottom: (50/@rootSize);
}

.top {
  padding: 0 (14/@rootSize);

  display: flex;
  height: (36/@rootSize);
  // background-color: pink;
  justify-content: space-around;
  align-items: center;
  .left {
    p {
      width: (30/@rootSize);
      font-size: (11/@rootSize);
      font-weight: bold;
    }

  }
  .center {
    margin: 0 (20/@rootSize);;
    width: (252/@rootSize);
    height:(31/@rootSize);
    background-color: #f7f7f7;
    border-radius:(15.5/@rootSize);
    display: flex;
    font-size: (11/@rootSize);
    align-items: center;
    p {
      padding-left: (15/@rootSize); ;
      color:  #919191;
    }
    img {
        margin-left: (16/@rootSize); 
        width: (10/@rootSize);
        height: (12/@rootSize);
    }

  }
  .right {
      width:(17/@rootSize);
      height:(18/@rootSize); 
      img {
        width:(17/@rootSize);
        height:(18/@rootSize); 
      }

  }
}
.banner {
  position: relative;
  height: (145/@rootSize);
  display: flex;
  // background-color: #1eaaf2;
  margin-top: (12/@rootSize);
  justify-content: center;
  align-items: center;
  ul {
    width: (42/@rootSize);
    left: 45%;
    bottom: (-8/@rootSize);
    display: flex;
    justify-content: space-around;
    position: absolute;
    
    li{
     
    
      img {
        width: (10/@rootSize);
        height: (5/@rootSize);
        // background-color: red;
      }
    }
  }
  img {
    width: (344/@rootSize);
    height: (130/@rootSize);
  }
}
.nav {

  margin-top: (16/@rootSize);
  display: flex;
  height:(75/@rootSize); 
  // background-color:red;
  justify-content: space-around;
  .left {
  height:(71/@rootSize); 
  width: (167/@rootSize); 
      img {
        height:(71/@rootSize); 
        width: (167/@rootSize); 
      }
  }
  .right {
    height:(71/@rootSize); 
    width: (167/@rootSize); 
    img {
      height:(71/@rootSize); 
      width: (167/@rootSize); 
    }
  }
}
.content {
  .price {
    padding: 0 (14/@rootSize);
    height: (24/@rootSize);
    // background-color: antiquewhite;
    display: flex;

    justify-content: space-between;
    align-items: center;
    p {
      
      font-size: (24/@rootSize);
      font-weight:bold;

    }
    img {
      height:(13/@rootSize);
      width: (7/@rootSize);

    }
    margin-top: (33/@rootSize);
   margin-bottom:(16/@rootSize);
  }
  .pic {
    height: (194/@rootSize);
    // background-color:aqua;
    display: flex;
    justify-content: space-around;
    .left {
    
      width: (168/@rootSize);
      height:(114/@rootSize);
      .bottom {
        margin-top:(12/@rootSize); 
        h3 {
          font-size: (13/@rootSize);
        }
        p {
          margin-top:(8/@rootSize); 
          font-size: (11/@rootSize);
          color: #9c9c9c;
        }
        h4 {
          margin-top:(12/@rootSize);
          font-size: (11/@rootSize);
          color: #f39800;
        }
        
      }


    }
    .right {
      img {
        width: (168/@rootSize);
        height:(114/@rootSize);
      }
      
     


    }
  }
}
.ggwei {
  display: flex;
  align-items: center;
  justify-content: center;
 
  // background-color: #f39800;
  img {
    width:  (344/@rootSize);
    height: (57/@rootSize);
  }
  margin-bottom: (30/@rootSize);
}
.main {
  padding: 0 (14/@rootSize);
  height: (666/@rootSize);
  // background-color: aqua;
  margin-bottom:(20/@rootSize);
  .header {
   
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      h3 {
        font-size: (19/@rootSize);
      }
    }
    .right {
      color: #3a3939;
      font-size: (11/@rootSize);
      span {
        a {
          color: #3a3939;
          height:(17/@rootSize);
          display: inline-block;
          border-bottom: 2px solid #1eaaf2;
          // background-color: bisque;
          
        }
      }
      .gray {
        margin-left:(22/@rootSize); 
      
        color: #999999;
      }
    } 
  }
  ul {
    margin-top:(21/@rootSize); 
    li {
      margin-top: (20/@rootSize);
      display: flex;

      justify-content: space-between;
      .left {
        width:(109/@rootSize);
        img {
          height: (80/@rootSize);
          width:(109/@rootSize);
        }
      }
      .right {
        width:(224/@rootSize);
        h4 {
          font-size: (13/@rootSize);
        }
        p  {
          font-size: (12/@rootSize);
          color: #a6a6a6;
        
        margin-top:(7/@rootSize);
        span {
          display: inline-block;
          width:(44/@rootSize);
          height: (16/@rootSize);
          text-align: center;
          line-height: (16/@rootSize);
          font-size: (9/@rootSize);
          border: 1px solid #a6a6a6;
          
        }
        .two {
          margin-left:(10/@rootSize); ;
        }
        
        }
       h3 {
        font-size:(12/@rootSize);
        color: #f39800;
        margin-top:(5/@rootSize); ;
       }
       
        
      }
    }

  }
  .search {
    margin-top: (20/@rootSize);
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      height: (37/@rootSize);
      width: (259/@rootSize);
      background-color: #f2f2f3;
      border-radius: (18.5/@rootSize);
      font-size:(12/@rootSize); 
      line-height:(37/@rootSize); 
      text-align: center;
      color: #a4a4a4;
    }
  
    
  }
 
}
.end {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: (84/@rootSize);
    width:(345/@rootSize);
  }
}
.footer { 


  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: (48/@rootSize);
  background-color: #f39800;
  ul {
    border-top: 2px solid #acacad;
    height: (48/@rootSize);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    li {
        display: flex;
        flex-direction: column;
        align-items: center;
      color: #c9c9c9;

        img {
          width: (18/@rootSize);
          height: (18/@rootSize);
          
        }
      p {
        margin-top: (5/@rootSize);
        a {
          
        text-align: center;
          display: block;
          font-size:(9/@rootSize);
          color: #c9c9c9;
        }
      }
     
    }
    .active {
      img {
        z-index: 9999;
       background-size: cover;
       width: (18/@rootSize);
       height: (18/@rootSize);
        background-image: url(../icons/footer_1.png);
      }
       a {
        color: #3d3d3d;

       }
      
    }
  
  }
}